<template>
  <div class="editApplyWeChat">
    <el-form :model="editApplyWeChatForm" :rules="editApplyWeChatRules" v-loading="editApplyWeChatLoading" label-width="100px" ref="editApplyWeChatRefs" class="editApplyWeChatCls">
      <el-form-item label="提现金额：" prop="price">
        <el-input v-inputFloat v-model="editApplyWeChatForm.price" type="text" placeholder="请输入提现金额"></el-input>
      </el-form-item>
      <el-form-item label="微信号：">
        <el-input v-model="editApplyWeChatForm.account" type="text" placeholder="请输入微信号"></el-input>
      </el-form-item>
      <el-form-item label="备注：">
        <el-input v-model="editApplyWeChatForm.remark" type="textarea" placeholder="请输入备注"></el-input>
      </el-form-item>
      <div class="subBtnWid">
        <el-button size="small" type="primary" @click="subEditApplyWeChat('editApplyWeChatRefs')" :loading="loadingBtn">提交</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
  import {
    getAppointApplyListApi,
    putApplyCreatApi
  } from '@/api/financial';

  export default {
    name: "index",
    props: {
      id: {
        type: [Number, String],
        default: ''
      }
    },
    data() {
      return {
        editApplyWeChatLoading: false,
        loadingBtn: false,
        editApplyWeChatRules: {
          price: [
            { required: true, message: '请填写提现金额', trigger: 'blur' }
          ]
        },
        editApplyWeChatForm: {
          price: '',
          account: '',
          remark: ''
        },
        editApplyWeChat: {}
      };
    },
    mounted() {
      this.getEditApplyWeChat();
    },
    methods: {
      subEditApplyWeChat(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$set(this, 'loadingBtn', true);
            putApplyCreatApi(this.id, {
              type: this.editApplyWeChat.type,
              account: this.editApplyWeChatForm.account,
              price: this.editApplyWeChatForm.price,
              remark: this.editApplyWeChatForm.remark,
              qrcode: this.editApplyWeChat.qrcode
            }).then(res => {
              this.$message.success('编辑成功');
              this.$emit('getApplyCreat');
              this.$emit('close');
              this.$set(this, 'loadingBtn', false);
            }).catch(() => {
              this.$set(this, 'loadingBtn', false);
            });
          } else {
            return false;
          }
        });
      },
      /**
       * 获取指定提现记录
       */
      getEditApplyWeChat() {
        this.$set(this, 'editApplyWeChatLoading', true);
        getAppointApplyListApi(this.id).then(res => {
          console.log('获取指定提现记录', res);
          this.$set(this, 'editApplyWeChatForm', {
            price: res.price,
            account: res.account,
            remark: res.remark
          });
          this.$set(this, 'editApplyWeChat', res);
          this.$set(this, 'editApplyWeChatLoading', false);
        }).catch(() => {
          this.$set(this, 'editApplyWeChatLoading', false);
        });
      }
    }
  }
</script>

<style scoped>

</style>
